import { DemoBlock } from '@/library/widgets/DemoBlock'
import Badge from '@/library/gallery/components/Badge'
import { Space } from '@/library/gallery/components/Space'
import styles from './style.module.scss'

export default () => (
  <>
    <DemoBlock title="基础用法">
      <Space style={{ '--gap': '24px' }}>
        <Badge content="5">
          <div className={styles.box} />
        </Badge>
        <Badge content="新">
          <div className={styles.box} />
        </Badge>
        <Badge content={Badge.dot}>
          <div className={styles.box} />
        </Badge>
      </Space>
    </DemoBlock>

    <DemoBlock title="带边框">
      <Badge content="啦啦啦" bordered>
        <div className={`${styles.box} ${styles.dark}`} />
      </Badge>
    </DemoBlock>

    <DemoBlock title="独立使用">
      <Space>
        <Badge content="99+" />
        <Badge content="新消息!" />
        <Badge content={Badge.dot} color="yellow" bordered />
      </Space>
    </DemoBlock>

    <DemoBlock title="自定义颜色和偏移量">
      <Space style={{ '--gap': '20px' }}>
        <Badge
          color="#108ee9"
          content={Badge.dot}
          style={{ '--right': '100%', '--top': '100%' }}
        >
          <div className={styles.box} />
        </Badge>
        <Badge
          color="#87d068"
          content={Badge.dot}
          style={{ '--right': '100%' }}
        >
          <div className={styles.box} />
        </Badge>
        <Badge content={Badge.dot}>
          <div className={styles.box} />
        </Badge>
        <Badge color="orange" content={Badge.dot} style={{ '--top': '100%' }}>
          <div className={styles.box} />
        </Badge>
      </Space>
    </DemoBlock>
  </>
)
